<template>
    <div class="container">
        <div class="loginBox">
            <div class="title">{{title}}</div>
            <ul>
                <li>
                    <span class="lable">邮箱:</span> <input type="text" name="email" v-model="email" />
                </li>
                <li>
                    <span class="lable">密码:</span> <input type="password" v-model="password" name="password" />
                </li>
                <li>
                    <span class="lable">验证码:</span> 
                    <span><input type="text" name="authCode" v-model="authCode" class="authCodeInput" /></span>
                    <span class="authCodeSpan"><img @click="changeAuthCode" :src="authCodeUrl" alt=""></span>
                </li>
                <li v-if="this.$route.params.acount">
                    <span class="lable">收款账号:</span> <input type="text" name="account" v-model="email" />
                </li>
            </ul>
            <div class="submitBox">
                <div class="registerBox"><Checkbox v-model="isRegister">注册一个新用户</Checkbox></div>
                <div>
                    <Button class="btn" type="primary" @click="doLogin">{{submitBtnText}}</Button>
                </div>
                <div>
                    <span class="initPassword" @click="handleInitPassword">忘记密码？</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {fetchAuthCodeUrl, submitLogin, sendInitPasswordMail} from "@/apis/Login";
import ServerResponseCode from '@/utils/ServerResponseCode';
import {isBlank} from '@/utils/validate';
import {setToken} from '@/utils/auth';

export default {
    data() {
        return {
            title: "收款吧管理系统",
            // 验证码地址
            authCodeUrl: "",
            email: "",
            password: "",
            authCode: "",
            acount: "",
            isRegister: false,
            submitBtnText: "登录",

        }
    },
    watch: {
       isRegister: function (val){
           if(val) {
               this.submitBtnText = "注册";
           }else {
               this.submitBtnText = "登录";
           }
       }
    },
    methods: {
        // 更新验证码
        changeAuthCode() {
            this.authCodeUrl = fetchAuthCodeUrl();
        },
        // 发起登录
        doLogin() {
            if(isBlank(this.email)) {
                this.$Message.warning("邮箱不能为空");
                return;
            }
            if(isBlank(this.password)) {
                this.$Message.warning("密码不能为空");
                return;
            }
            if(isBlank(this.authCode)) {
                this.$Message.warning("验证码不能为空");
                return;
            }
            submitLogin(this.email, this.password, this.authCode, this.isRegister, null).then(response => {
                if(response.code === ServerResponseCode.SUCCESS) {
                    // 如果成功，跳转到主页。
                    // 1、将token保存在本地
                    setToken(response.data.token);
                    // 2、跳转到主页
                    this.$router.push({path: "/manage/merchant"});
                }else {
                    this.$Message.warning(response.msg);
                    // 刷新验证码
                    this.changeAuthCode();
                }
            });
        },
        // 处理重置密码功能
        handleInitPassword() {
            // 重置密码对话框
            this.$Modal.confirm({
                title: "请输入注册邮箱，找回密码",
                okText: "发送重置邮件",
                onOk: () => {
                    // 发起发送邮件请求
                    if(isBlank(this.email)){
                        this.$Message.warning("注册邮箱不能为空");
                        return;
                    }
                    // 发起发送重置密码请求
                    sendInitPasswordMail(this.email).then(response => {
                        if(response.code === ServerResponseCode.SUCCESS) {
                            this.$Message.success(response.msg);
                        }else{
                            this.$Message.warning(response.msg);
                        }
                    });
                },
                render: (h) => {
                    return h('Input', {
                        props: {
                            value: this.value,
                            autofocus: true,
                            placeholder: '请输入要注册的邮箱'
                        },
                        on: {
                            input: (val) => {
                                this.email = val;
                            }
                        }
                    })
                }
            })
        }
    },
    // 组件挂载时执行
    mounted() {
        this.changeAuthCode();
    }
}
</script>

<style scoped>
html,body {
    height: 100%;
    width: 100%;
}

.container {
    /* background-image: url('../assets/login-bg.jpg'); */
    background-color: #cccc;
    -moz-background-size:100% 100%;  
    background-size:100% 100%;  
    background-attachment: fixed;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.loginBox{
    position: absolute;
    left: 50%;
    right: 50%;
    top: 50%;
    bottom: 50%;
    width: 360px;
    height: 340px;
    margin: -170px -180px;
    /* background-color:rgba(238, 238, 238,0.3); */
    background-color:rgba(238, 238, 238, 0.5);
    border-radius: 10px;
}

.loginBox .title {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 24px;
    padding-top: 10px;
}

.loginBox ul,li {
    padding: 0;
    margin: 0;
}

.loginBox ul li{
    list-style: none;
    height: 50px;
    line-height: 50px;
}
.loginBox ul li input {
    border: none;
    padding: 5px;
    height: 35px;
    border-radius: 5px;
    width: 200px;
}

.loginBox ul li .lable{
    display: inline-block;
    width: 100px;
    text-align: right;
    padding-right: 10px;
    font-size: 18px;
}
.loginBox .authCodeInput {
    width: 100px;
}
.loginBox .authCodeSpan{
    display: inline-block;
    width: 90px;
    margin-left: 10px;
}
.loginBox .authCodeSpan img{
    height: 34px;
    width: 90px;
    vertical-align: middle;
}
.loginBox .submitBox {
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
}
.loginBox .submitBox .btn{
    width: 280px;
}

.loginBox .submitBox .initPassword {
    font-size: 12px;
    text-decoration: underline;
    padding-left: 10px;
    cursor: pointer;
}
.registerBox{
    text-align: left;
    padding-left: 50px;
    height: 40px;
    line-height: 40px;
}
</style>
